<script lang="ts" setup>
import { ref, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";

// 搜索关键词
const searchKeyword = ref("");

// 筛选条件
const filters = reactive({
    time: "",
    industry: "",
    location: "",
    major: "",
});

// 快速筛选标签
const activeQuickFilters = ref([]);
const quickFilterTags = [
    { label: "本周宣讲会", value: "this_week" },
    { label: "线上招聘", value: "online" },
    { label: "应届生专场", value: "graduates" },
    { label: "实习机会", value: "internship" },
    { label: "名企招聘", value: "famous_company" },
];

// 行业选项
const industryOptions = [
    { label: "互联网/IT", value: "internet" },
    { label: "金融", value: "finance" },
    { label: "教育", value: "education" },
    { label: "医疗健康", value: "healthcare" },
    { label: "制造业", value: "manufacturing" },
    { label: "房地产", value: "real_estate" },
];

// 地点选项
const locationOptions = [
    { label: "北京", value: "beijing" },
    { label: "上海", value: "shanghai" },
    { label: "广州", value: "guangzhou" },
    { label: "深圳", value: "shenzhen" },
    { label: "杭州", value: "hangzhou" },
    { label: "成都", value: "chengdu" },
];

// 事件
const emit = defineEmits(["search", "filter-change"]);

// 搜索处理
const handleSearch = () => {
    emit("search", searchKeyword.value);
};

// 重置筛选条件
const resetFilters = () => {
    searchKeyword.value = "";
    for (const key in filters) {
        filters[key] = "";
    }
    activeQuickFilters.value = [];
    emit("filter-change", { filters: filters, quickFilters: activeQuickFilters.value });
};

// 切换快速筛选标签
const toggleQuickFilter = (value, checked) => {
    if (checked) {
        activeQuickFilters.value.push(value);
    } else {
        activeQuickFilters.value = activeQuickFilters.value.filter((v) => v !== value);
    }
    emit("filter-change", { filters: filters, quickFilters: activeQuickFilters.value });
};

// 筛选条件变化
const handleFilterChange = () => {
    emit("filter-change", { filters: filters, quickFilters: activeQuickFilters.value });
};
</script>

<template>
    <el-card class="filter-card">
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="6" :lg="6">
                <el-input
                    v-model="searchKeyword"
                    placeholder="搜索公司/岗位关键词"
                    clearable
                    @keyup.enter="handleSearch"
                >
                    <template #prefix>
                        <el-icon><Search /></el-icon>
                    </template>
                </el-input>
            </el-col>

            <el-col :xs="24" :sm="12" :md="4" :lg="4">
                <el-select
                    v-model="filters.time"
                    placeholder="招聘时间"
                    clearable
                    style="width: 100%"
                    @change="handleFilterChange"
                >
                    <el-option label="近一周" value="week" />
                    <el-option label="近一月" value="month" />
                    <el-option label="近三月" value="three_months" />
                    <el-option label="全部时间" value="all" />
                </el-select>
            </el-col>

            <el-col :xs="24" :sm="12" :md="4" :lg="4">
                <el-select
                    v-model="filters.industry"
                    placeholder="行业分类"
                    clearable
                    style="width: 100%"
                    @change="handleFilterChange"
                >
                    <el-option
                        v-for="item in industryOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-col>

            <el-col :xs="24" :sm="12" :md="4" :lg="4">
                <el-select
                    v-model="filters.location"
                    placeholder="举办地点"
                    clearable
                    style="width: 100%"
                    @change="handleFilterChange"
                >
                    <el-option
                        v-for="item in locationOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-col>

            <el-col :xs="24" :sm="12" :md="6" :lg="6">
                <el-space>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                    <el-button @click="resetFilters">重置</el-button>
                </el-space>
            </el-col>
        </el-row>

        <!-- 快速筛选标签 -->
        <el-row class="mt-3">
            <el-col :span="24">
                <el-space wrap>
                    <span class="filter-label">快速筛选:</span>
                    <el-check-tag
                        v-for="tag in quickFilterTags"
                        :key="tag.value"
                        :checked="activeQuickFilters.includes(tag.value)"
                        @change="(checked) => toggleQuickFilter(tag.value, checked)"
                    >
                        {{ tag.label }}
                    </el-check-tag>
                </el-space>
            </el-col>
        </el-row>
    </el-card>
</template>

<style scoped>
.filter-card {
    margin-bottom: 20px;
    border-radius: 12px;
    border: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05) !important;
}

.filter-label {
    color: #606266;
    font-weight: 500;
    font-size: 14px;
}

.mt-3 {
    margin-top: 16px;
}

/* 优化输入框样式 */
:deep(.el-input__wrapper) {
    border-radius: 8px;
    box-shadow: 0 0 0 1px #e0e0e0 inset;
    padding: 0 16px;
    transition: all 0.3s;
}

:deep(.el-input__wrapper:hover) {
    box-shadow: 0 0 0 1px #c0c4cc inset;
}

:deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px var(--el-color-primary) inset !important;
}

/* 优化下拉框样式 */
:deep(.el-select) {
    width: 100%;
}

:deep(.el-select__wrapper) {
    border-radius: 8px;
}

/* 优化快速筛选标签样式 */
:deep(.el-check-tag) {
    border-radius: 20px;
    padding: 2px 12px;
    margin: 0 8px 8px 0;
    border: none;
    background-color: #f5f7fa;
    transition: all 0.2s;
}

:deep(.el-check-tag.is-checked) {
    background-color: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
}

:deep(.el-check-tag:not(.is-checked):hover) {
    background-color: #ebeef5;
}

/* 优化按钮样式 */
:deep(.el-button) {
    border-radius: 8px;
    padding: 0 20px;
    font-weight: 500;
}

:deep(.el-space) {
    flex-wrap: nowrap;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .el-col {
        margin-bottom: 12px;
    }

    :deep(.el-space) {
        width: 100%;
        justify-content: space-between;
    }

    :deep(.el-space__item) {
        margin-right: 0 !important;
    }
}
</style>
